<template>
    <div class="main">
        <div class="top">
            <v-change :msg="changedata[0]"></v-change>
            <div><el-input v-model="input" placeholder="请输入类型名称"></el-input><el-button type="primary">查询</el-button><el-button type="primary">更多查询</el-button></div>
        </div>
        <div class="con">
            <el-table
                :data="tableData"
                border

                style="width: 100%">
                <el-table-column
                    align="center"
                    prop="date"
                    label="类型名称"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="name"
                    align="center"
                    label="创建人"
                    width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="name"
                    label="创建时间"
                    width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="name"
                    label="异动人"
                    width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="name"
                    label="异动时间"
                    width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="caozuo flex-between-c">
                            <v-change :msg="changedata[2]"></v-change>
                            <el-button type="primary">下发</el-button>
                            <v-change :msg="changedata[1]"></v-change>
                            <div><el-button type="info">删除</el-button></div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import change from './change_mendianlx'
    export default {
        name: "index",
        components:{
            'vChange':change
        },
        data () {
            return{
                changedata:[{name:'创建',title:'创建门店类型'},
                    {name:'修改',title:'修改门店类型'},
                    {name:'详情',title:'类型详情'}],
                input:'',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    }
</script>

<style lang="less" scoped>
    .top{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 10px;
        div{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    }
    .con{
        .caozuo{

        }
    }
</style>
